<template>
	<view>
		<!-- 自定义标题栏 -->
		<navigationBar title="全部分类" extClass="nav" id="top"></navigationBar>
		<view class="container">
			<!-- 搜索框 -->
			<!-- <view class="index-search-box">
    <navigator class="index-search" hover-class="none" openType="navigate" url="../search/index">
      <view class="index-cont-search t-c">
        <icon class="text-center" color="{{searchColor}}" size="{{searchSize}}" type="search"></icon>
        <text>{{searchName}}</text>
      </view>
    </navigator>
  </view> -->

			<!-- 分类样式：一级分类(大图) 10 -->
			<view class="cate-content" v-if="templet.category_style == 10 && list.length > 0">
				<view class="cate-wrapper cate_style__10">
					<scroll-view scroll-y="true" :style="'height: ' + (scrollHeight - 10) + 'px;'">
						<view class="cate-item" v-for="(item, index) in list" :key="index">
							<navigator hover-class="none" :url="'/pages/category/extend/list?category_id=' + item.category_id">
								<image lazy-load mode="widthFix" :src="item.image"></image>
							</navigator>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 分类样式：一级分类(小图) 11 -->
			<view class="cate-content" v-else-if="templet.category_style == 11 && list.length > 0">
				<view class="cate-wrapper cate_style__11">
					<scroll-view class="clear dis-flex flex-wrap" scroll-y="true" :style="'height: ' + ( scrollHeight - 10 ) + 'px;'">
						<template v-for="(item, index) in list">
							<view class="cate-item" :key="index" v-for="(vo,k) in item.child">
								<navigator hover-class="none" :url="'/pages/category/extend/list?category_id=' + vo.category_id">
									<image lazy-load mode="aspectFill" :src="vo.image"></image>
									<text class="f-26">{{ vo.name }}</text>
								</navigator>
							</view>
						</template>
					</scroll-view>
				</view>
			</view>

			<!-- 分类样式：二级分类 20 -->
			<view class="cate-content dis-flex" v-else-if="templet.category_style == 20 && list.length > 0">

				<!-- 左侧 一级分类 -->
				<scroll-view class="cate-left f-28" :scroll-y="true" :style="'height: ' + scrollHeight + 'px;'">
					<view :class="'type-nav ' + (curNav==item.category_id?'selected':'')" v-for="(item, cateLeft) in list" :key="cateLeft"
					 @tap="selectNav(item.category_id, cateLeft)">
						<view class="line"></view>{{ item.name }}
					</view>
				</scroll-view>

				<!-- 右侧 二级分类 -->
				<scroll-view class="cate-right b-f" :scroll-top="scrollTop" scroll-y="true" :style="'height: ' + scrollHeight + 'px;'">
					<view v-if="list[curIndex]">
						<view class="cate-right-cont">
							<view class="cate-two-box">
								<view class="cate-cont-box">
									<view class="flex-three" v-for="(item, cit) in list[curIndex].child" :key="cit">
										<navigator hover-class="none" :url="'../category/extend/list?category_id=' + item.category_id">
											<view class="cate-img" :id="item.file_id">
												<image lazy-load :src="item.image ? item.image : ''"></image>
											</view>
											<text>{{item.name}}</text>
										</navigator>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<tui-no-data v-if="!list.length && notcont" imgUrl="https://pic.kaidanxia.com/2020-08-21/20200821154707fdc1e3915.png"
			 :imgWidth="264" :imgHeight="264">
				<view class="col-9">亲，暂无商品分类哦</view>
			</tui-no-data>

		</view>
	</view>
</template>

<script>
	const App = getApp().globalData;
	import navigationBar from '@/components/navigationBar/index';

	export default {
		data() {
			return {
				// 搜索框样式
				searchColor: "rgba(0,0,0,0.4)",
				searchSize: "15",
				searchName: "搜索商品",
				// 列表高度
				scrollHeight: 0,
				// 一级分类：指针
				curNav: true,
				curIndex: 0,
				// 分类列表
				list: [],
				// show
				notcont: false,
				templet: "",
				scrollTop: 0
			};
		},

		components: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			// 设置分类列表高度
			this.$nextTick(() => {
				this.setListHeight();
			})
			// 获取分类列表
			this.getCategoryList();
		},

		/**
		 * 设置分享内容
		 */
		onShareAppMessage() {
			let _this = this;

			return {
				title: _this.templet.share_title,
				path: '/pages/category/index?' + getApp().globalData.getShareUrlParams()
			};
		},

		methods: {
			/**
			 * 设置分类列表高度
			 */
			setListHeight() {
				const query = wx.createSelectorQuery();
				query.select('#top').boundingClientRect();
				query.selectViewport().scrollOffset();
				query.exec(res => {
					let systemInfo = wx.getSystemInfoSync(),
						rpx = systemInfo.windowWidth / 750,
						// 计算rpx
						// tapHeight = Math.floor(rpx * 74), // tap高度
						// - 47
						scrollHeight = systemInfo.windowHeight - res[0].height; // swiper高度

					this.setData({
						scrollHeight: scrollHeight
					});
				});
			},

			/**
			 * 获取分类列表
			 */
			getCategoryList() {
				let _this = this;

				getApp().globalData._get('category/index', {}, result => {
					let data = result.data;

					_this.setData({
						list: data.list,
						templet: data.templet,
						curNav: data.list.length > 0 ? data.list[0].category_id : true,
						notcont: !data.list.length
					});
				});
			},

			/**
			 * 一级分类：选中分类
			 */
			selectNav(category_id, index) {
				this.setData({
					curNav: category_id,
					curIndex: parseInt(index),
					scrollTop: 0
				});
			}

		}
	};
</script>
<style lang="scss">
	@import "index0";
</style>
